<!-- 
 * 3DCityDB-Web-Map
 * http://www.3dcitydb.org/
 * 
 * Copyright 2015 - 2017
 * Chair of Geoinformatics
 * Technical University of Munich, Germany
 * https://www.gis.bgu.tum.de/
 * 
 * The 3DCityDB-Web-Map is jointly developed with the following
 * cooperation partners:
 * 
 * virtualcitySYSTEMS GmbH, Berlin <http://www.virtualcitysystems.de/>
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *     http://www.apache.org/licenses/LICENSE-2.0
 *     
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <link rel="icon" type="image/png" href="../../theme/img/favicon.png" sizes="16x16">
  <title>New York City demo</title>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="../../ThirdParty/Cesium/Cesium.js"></script> 
  <script src="../../ThirdParty/Intersection/IntersectionAPI.js"></script>
  <script src="../../js/3dcitydb-web-map.js"></script>  
  <script src="../../js/CitydbUtil.js"></script>  
  <script src="../../js/CitydbWebworker.js"></script>
  <script src="../../js/CitydbSceneTransforms.js"></script> 
  <script src="../../js/CitydbKmlHighlightingManager.js"></script>   
  <script src="../../js/CitydbKmlTilingManager.js"></script>  
  <script src="../../js/CitydbKmlDataSource.js"></script>    
  <script src="../../js/Cesium3DTilesDataLayer.js"></script>  
  <script src="../../js/CitydbKmlLayer.js"></script> 
  
  <style>
     @import url(../../ThirdParty/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          top: 0px;
          left: 0px;
          position: absolute;
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
          z-index: -1;
      }
      #uiMenu {
          border-radius:5px;
          padding: 10px;
          position:absolute;
          left: 20px;
          font-family: "Arial";
          z-index: 99999;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
   <div id="uiMenu">
    <button type="button" onclick="addLayers()">add Data Layers</button>
    <button type="button" onclick="removeLayers()">remove Data Layers</button>
  </div>
  <script>
	Cesium.BingMapsApi.defaultKey = 'ApOW9LMkerqWIVSnFauilSeaZyp8df66byy1USCTjgTdMvhb4y1iAhEsUHQfCgzq'
	
	var viewer = new Cesium.Viewer('cesiumContainer', {
		baseLayerPicker : false
	});
	var extent = new Cesium.Rectangle.fromDegrees(-74.2554618991863, 40.4984065460536, -73.6992741782758, 40.9147033697977);
	viewer.camera.setView({destination: extent})
	
	var webMap = new WebMap3DCityDB(viewer);
	
	// activate Events
	webMap.activateViewChangedEvent(true);			
	webMap.activateMouseClickEvents(true);
	webMap.activateMouseMoveEvents(true);

	
	var buildingLayer;
	var lotLayer;
	var streetLayer;
	
	var addLayers = function() {
		buildingLayer = new Cesium3DTilesDataLayer({
			url : 'https://cesiumjs.org/NewYork/3DTilesGml/'
		});
		
		lotLayer = new CitydbKmlLayer({
			url : './data/Lots/NYC_Manhattan_Lots_footprint_MasterJSON.json'
		});
		
		streetLayer = new CitydbKmlLayer({
			url : './data/Streets/NYC_Manhattan_Streets_footprint_MasterJSON.json'
		});
		
		subwayLayer = new CitydbKmlLayer({
			url : './data/subway/new_york_subway.kml'
		});
		
		webMap.addLayer(subwayLayer);
		webMap.addLayer(buildingLayer);
		webMap.addLayer(lotLayer);
		var promise = webMap.addLayer(streetLayer);
				
		Cesium.when(promise, function(loadedcitydbLayer){
			loadedcitydbLayer.zoomToStartPosition();
		});	
	};
	
	var removeLayers = function() {
		webMap.removeLayer(buildingLayer.id);
		webMap.removeLayer(lotLayer.id);
		webMap.removeLayer(streetLayer.id);
		webMap.removeLayer(subwayLayer.id);
	};	
</script>
</body>
</html>
